<template>
  <button @click="isShow = !isShow">Toggle</button>
  <!-- 添加或者删除动画的时候才会加动画 -->
  <!-- <transition name="fade"> -->
  <!-- 自定义class 点复制 -->
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @afterLeave="afterLeave"
  >
    <div class="title" v-if="isShow">前程似锦</div>
  </transition>
</template>
<script setup>
import { ref } from "vue";
const isShow = ref(true);
// 对应 相关的生命周期 相当于 from
function beforeEnter() {
  console.log("beforeEnter");
}
// active
function enter() {
  console.log("enter");
}
// to 结束
function afterEnter() {
  console.log("afterEnter");
}
// 离开
function beforeLeave() {
  console.log("beforeLeave");
}
function leave() {
  console.log("leave");
}
function afterLeave() {
  console.log("afterLeave");
}
</script>
<style scoped>
.title {
  display: inline-block;
  background-color: aqua;
}
</style>
